<template>
    <div id="setting">
        <p>
			<el-icon style="color: blue;">
				<Notebook/>
			</el-icon>
            <strong>更改密码</strong>
        </p>
        <div>
            <el-form :model="user" status-icon :rules="rules" ref="formRef" label-width="100px" class="demo-ruleForm" @submit.native.prevent="submitForm">
                <el-form-item label="昵称" prop="name" required>
                    <el-input v-model="user.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="电话" prop="phone" required>
                    <el-input v-model="user.phone" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="地址" prop="addr" required>
                    <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" v-model="user.addr" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="danger" form="user" @click="submitForm">确认修改</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import api from '../../api';
import { ElMessage } from 'element-plus';
import store from '../../store';

// 定义表单引用
const formRef = ref(null);

// 定义表单数据
const user = ref({ name: '', addr: '', phone: '' });

// 定义验证规则
const validateName = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('请输入原始密码'));
    } else {
        // 验证通过，调用 callback()
        callback();
    }
};

const validatePhone = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('请输入电话号码'));
    } else {
        if (user.value.phone.length!== 11) {
            callback(new Error('请输入11位数的电话号码'));
        }
        // 验证通过，调用 callback()
        callback();
    }
};

const validateAddr = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('请输入收货地址'));
    } else {
        // 验证通过，调用 callback()
        callback();
    }
};

const rules = {
    name: [{ validator: validateName, trigger: 'blur' }],
    phone: [{ validator: validatePhone, trigger: 'blur' }],
    addr: [{ validator: validateAddr, trigger: 'blur' }]
};

// 提交表单方法
const submitForm = () => {
    formRef.value.validate((valid) => {
        if (valid) {
            api.postj("api/user/updateShip", user.value).then((resp) => {
                if (resp.data.code == 200) {
                    window.localStorage.setItem("name", user.value.name);
					// 更新收货人
                    store.state.user.name = user.value.name;
                    ElMessage.success(resp.data.msg);
                }
            });
        } else {
            return false;
        }
    });
};

// 组件挂载时获取数据
onMounted(() => {
    api.get("api/user/shipInfo").then((resp) => {
        user.value = resp.data.data;
    });
});
</script>

<style lang="less">
#setting {
    width: 100%;
    height: 100%;

    p:nth-child(1) {
        display: block;
        height: 30px;
        line-height: 30px;
        border-bottom: 2px solid #b3d8ff;
        text-align: center;
        margin-bottom: 20px;
    }

  .demo-ruleForm {
        display: flex;
        flex-direction: column;
        align-items: center;

      .el-input__inner,
      .el-textarea__inner {
            width: 400px;
        }
    }
}
</style>    
<!-- 
1. 在 el-form 标签上添加了 @submit.native.prevent="submitForm"，
   这是为了捕获表单的提交事件，并阻止默认的提交行为，然后调用 submitForm 方法。
2. 将 “确认修改” 按钮的 @click 事件改为调用 submitForm 方法。
3. 在 submitForm 方法中，通过 this.$refs.user.validate 方法触发整个表单的校
   验。只有当 valid 为 true 时，才会执行提交到服务端的逻辑。这样可以确保在校验
   失败时不会提交到服务端。
-->